<template>
  <div class="mainIndex">
  <!--$store(store).state(状态集).feed(模块).feeds(状态) -->
    <div v-for="item in $store.getters.getFeeds" :key="item.id">
      <main-index-item :comment="item"></main-index-item>
    </div>
  </div>
</template>

<script>
import * as ActionsTypes from '@/store/actions-types';
import MainIndexItem from './main.index.item';

export default {
  name: 'mainIndex',
  data() {
    return {
    };
  },
  created() {
    if (this.$store.getters.getFeeds === null || this.$store.getters.getFeeds.length === 0) {
      this.$store.dispatch(ActionsTypes.fetchFeeds);
      // Actions.fetchFeeds1();
    }
  },
  mounted() {
  },
  updated() {
  },
  destroyed() {
  },
  components: {
    'main-index-item': MainIndexItem,
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
